<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button ion-button icon-left>
        <ion-icon class="nav-back" name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>{{"helpTitle" | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list padding>
    <ion-item>
      <ion-label stacked color=hushitong>{{"suggestionTitle" | translate}}</ion-label>
      <ion-textarea rows="5" [(ngModel)]="suggestion" placeholder="{{'suggestionTips' | translate}}" required></ion-textarea>
    </ion-item>
    <ion-item>
      <button ion-button clear item-start icon-start color="light" (click)="takephoto()">
        <ion-icon class="message" name="camera" *ngIf="3 > this.images.length" item-start large color=hushitong></ion-icon>
      </button>
      <ion-label>{{"picTips" | translate}}</ion-label>
    </ion-item>
    <button ion-button color="danger" clear icon-only (click)="deletephoto()">
      <ion-icon class="mark" name='trash' is-active="false"></ion-icon>
    </button>
    <span *ngFor="let image of images">
      <img width="80" height="80" [src]="image.src" />
    </span>
    <ion-item>
      <ion-label stacked color=hushitong>{{"phoneTitle" | translate}}</ion-label>
      <ion-input clearInput="true" type="text" [(ngModel)]="phone" placeholder="{{'phoneTips' | translate}}"></ion-input>
    </ion-item>
  </ion-list>

  <div padding>
    <button ion-button full color="light" (click)="submit()" [disabled]="!suggestion || isLoading || finished">
      <ion-label color="hushitong">{{getMessage()}}</ion-label>
    </button>
  </div>
</ion-content>
